<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { exceptApi } from '@/apis/task.js'
// 组件 ref
const formData = ref({
	transportTaskId: '', //运输任务
	exceptionTime: '', //异常时间
	exceptionPlace: '', //上报异常位置
	exceptionType: '', //异常类型
	exceptionDescribe: '', //异常描述
	exceptionImagesList: [] //异常图片
})

onLoad(({ transportTaskId }) => {
	console.log('在途 异常上报')
	// 存储任务 id
	formData.value.transportTaskId = transportTaskId
})
// 文件提示
const exceptTime = computed(() => {
	return timePicker.value || '请选择'
})
// 异常日期
const timePicker = ref('')

// 打开地图
async function onLocationChoose() {
	const res = await uni.chooseLocation()
	console.log('选择的位置信息：', res.address)
	formData.value.exceptionPlace = res.address
}

// 定义 popup 组件展示的数据
const exceptionTypes = reactive([
	{ text: '发动机启动困难', checked: false },
	{ text: '不着车，漏油', checked: false },
	{ text: '照明失灵', checked: false },
	{ text: '排烟异常、温度异常', checked: false },
	{ text: '其他问题', checked: false }
])

//点击处理异常项
const selectType = (i) => {
	//拿到当前点击的 下标
	exceptionTypes[i].checked = !exceptionTypes[i].checked
}

// 点击类型弹层确认按钮
const popup = ref(null)
function onPopupConfirm() {
	/**
	 * 获取选中的异常类型
	 */
	const selected = exceptionTypes.filter((item) => item.checked)
	console.log('异常项', selected)
	if (selected.length > 0) {
		formData.value.exceptionType = selected.map((item) => item.text).join('|')
	} else {
		uni.showToast({
			title: '请至少选择一个异常项目！'
		})
	}

	popup.value.close() //关闭弹层
}

// 打开弹层
function onPopupOpen() {
	popup.value.open() //打开弹层
}

//异常描述 字符的长度
const wordTotal = computed(() => formData.value.exceptionDescribe.length)

//异常图片
const exceptImgs = ref([])

//兜底校验
const isSubmitOk = computed(() => {
	//  一假 都假  -  左边为假 右边不会在执行
	return !formData.value.exceptionTime || !formData.value.exceptionPlace || !formData.value.exceptionType || !exceptImgs.value.length
})

// 表单提交
const submit = async () => {
	// 处理图片 并赋值
	formData.value.exceptionImagesList = exceptImgs.value.map(({ url }) => ({ url }))
	await exceptApi(formData.value)
	setTimeout(() => {
		uni.showToast({
			title: '异常上报成功'
		})
	}, 1000)
	//成功后 跳转到 详情页
	uni.reLaunch({
		url: '/pages/task/index'
	})
}
</script>

<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view style="margin: 30rpx" class="scroll-view-wrapper">
				<uni-list :border="false">
					<uni-list-item show-arrow title="异常时间">
						<template v-slot:footer>
							<uni-datetime-picker v-model="formData.exceptionTime">
								<view class="picker-value">{{ formData.exceptionTime || '请选择' }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>

					<uni-list-item show-arrow clickable ellipsis="1" @click="onLocationChoose" title="上报位置" :rightText="formData.exceptionPlace || '请选择'" />
					<uni-list-item show-arrow clickable @click="onPopupOpen" title="异常类型" :rightText="formData.exceptionType || '请选择'" />
					<uni-list-item direction="column" title="异常描述">
						<template v-slot:footer>
							<view class="textarea-wrapper">
								<textarea v-model="formData.exceptionDescribe" class="textarea" placeholder="请输入异常描述"></textarea>
								<view class="words-count">{{ wordTotal }}/50</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
						<template v-slot:footer>
							<uni-file-picker v-model="exceptImgs" file-extname="jpg,webp,gif,png" limit="6"></uni-file-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
		<view class="fixbar">
			<button @click="submit" :disabled="isSubmitOk" class="button disable">提交</button>
		</view>
		<!-- 异常类型弹层 -->
		<uni-popup ref="popup" :mask-click="false" type="bottom">
			<uni-list class="popup-action-sheet">
				<uni-list-item>
					<template v-slot:header>
						<view class="header">选择类型</view>
					</template>
				</uni-list-item>
				<uni-list-item v-for="(item, index) in exceptionTypes" :key="item.text" :title="item.text">
					<template v-slot:footer>
						<checkbox-group @change="selectType(index)" class="checkbox">
							<checkbox :checked="item.checked" color="#EF4F3F" />
						</checkbox-group>
					</template>
				</uni-list-item>

				<uni-list-item>
					<template v-slot:body>
						<button @click="onPopupConfirm" class="button">确定</button>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
